<template>
    <div class="shop-container">
        <div class="shop-list">
            <div class="mui-card" v-for="(item,i) in shoplist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters.selectCar[item.id]" @change="selected(item.id,$store.getters.selectCar[item.id])"></mt-switch>
                        <img :src="item.thumb_path">
                        <div class="info">
                            <h2>{{ item.title }}</h2>
                            <p>
                                <span class="price">￥{{ item.sell_price }}</span>
                                <numbox :getShopCount='$store.getters.getShopCount[item.id]' :getId='item.id'></numbox>
                                <a href="#" @click.prevent="remove(item.id,i)">删除</a>
                            </p>
                        </div>
					</div>
				</div>
			</div>
            <!--  -->
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
                            <p>总计（不含运费）</p>
                            <p>以勾选商品<span class="red">{{ $store.getters.getCountAndAmount.count }}</span>件，总价<span class="red">￥ {{ $store.getters.getCountAndAmount.amount }}</span></p>
                        </div>
                        <mt-button type='danger'>去结算</mt-button>
					</div>
				</div>
			</div>


            <p>{{$store.getters.selectCar}}</p>
        </div>
    </div>
</template>
<script>
import numbox from '../subcomponents/shopcar_numbox.vue'
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            shoplist:[]
        }
    },
    created(){
        this.getShopList()
    },
    methods:{
        getShopList(){
            var idArr = []
            this.$store.state.car.forEach(item=>idArr.push(item.id))
            if(idArr.length <= 0){
                return 
            }
            this.$http.get('api/goods/getshopcarlist/' + idArr.join(',')).then(result=>{
                if(result.body.status === 0){
                    this.shoplist = result.body.message
                }else{
                    Toast("获取购物车列表失败!")
                }
            })
        },
        remove(id,index){
            // id 是用来给 store 中的 car 删除数据的， index 是用来给 shoplist 删除数据的
            this.shoplist.splice(index,1)
            this.$store.commit('removeCar',id)
        },
        selected(id,val){
            this.$store.commit('selectedCar',{id,selected:val})
        }
    },
    components:{
        numbox
    }
}
</script>
<style lang='scss' scoped>
    .shop-container{
        background-color:#eee;
        overflow:hidden;
        .shop-list{
            .mui-card-content-inner{
                display: flex;
                align-items: center;
            }
            img{
                width:60px;
                height:60px;
            }
            h2{
                font-size: 13px;
            }
            .info{
                .price{
                    color:red;
                    font-weight:bold;
                }
            }
            .jiesuan{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .red{
                    color:red;
                    font-weight: bold;
                }
            }
        }
    }
</style>